<template>
    <footer>
        <keep-alive>
            <router-link to = "home">
                <home></home>
            </router-link>
        </keep-alive>
        <keep-alive>
            <router-link to = "yqFind">
                <find></find>
            </router-link>
        </keep-alive>
        <keep-alive>
            <router-link to = "myOrder">
                 <order></order>
            </router-link>
        </keep-alive>
        <keep-alive>
            <router-link to = "myInfo">
                <self></self>
            </router-link>
        </keep-alive>
    </footer>
</template>
<script>
    import Vue from 'vue'
    Vue.component('home', {
        data () {
            return {
            name: '首页'
        }
    },

      template: `
        <div id="home">
            <i class="iconfont icon-eleme"></i>
            <p>{{ name }}</p>
        </div>

      `
    })
    Vue.component('find', {
      data () {
        return {
          name: '发现'
        }
      },
      template: `
        <div id="find">
            <i class="iconfont icon-find"></i>
            <p>{{ name }}</p>
        </div>
      `
    })
    Vue.component('order', {
      data () {
        return {
          name: '订单'
        }
      },
      template: `
        <div id="order">
            <i class="iconfont icon-order"></i>
            <p>{{ name }}</p>
        </div>
      `
    })
    Vue.component('self', {
      data () {
        return {
          name: '我的'
        }
      },
      template: `
        <div id="self">
            <i class="iconfont icon-self"></i>
            <p>{{ name }}</p>
        </div>
      `
    })
export default {

    data() {
        return {
            title: [
                {
                    id: 'home',
                    name: '首页',

                },
                {
                    id: 'find',
                    name: '发现'
                },
                {
                    id: 'order',
                    name: '订单'
                },
                {
                    id: 'self',
                    name: '我的'
                }
            ]
        }
    }
}
</script>
<style scoped>
    footer {
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 1px solid #E7E7E7;
        display: flex;
        text-align: center;
        z-index: 10;
    }
    footer a{
        color:#0897ff;
    }
    footer div {
        flex: 1;
        font-size: .12rem;
        margin: .05rem .348rem;

    }
</style>

